<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时间段管理</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';

	function show() {
		$('#form').form('clear');

		$('#name').val('新时间段');
		$('#startTime').timespinner('setValue', '08:00');
		$('#endTime').timespinner('setValue', '12:00');
		$('#beforeStart').numberspinner('setValue', '60');
		$('#afterStart').numberspinner('setValue', '60');
		$('#beforeEnd').numberspinner('setValue', '60');
		$('#afterEnd').numberspinner('setValue', '60');

		$('#dlgWin').dialog('open');
	}

	function edit() {
		var grid = $('#grid');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示', '请选择数据!');
			return;
		}

		var form = $('#form');
		form.form('clear');
		form.form('load', row);
		$('#dlgWin').dialog('open');
	}

	function save() {
		var name = 'worktime';
		var url = path + '/' + name + '/save/';
		postJson($('#dlgWin'), $('#form'), $('#grid'), url, name);
	}

	function del() {
		var grid = $('#grid');
		var url = path + '/worktime/delete/';
		delById(grid, url);
	}
</script>
</head>
<body class="easyui-layout">
	<!-- 添加时间段窗体 -->
	<div id="dlgWin" class="easyui-dialog" title="添加时间段"
		style="width:300px;height:280px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						save();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgWin').dialog('close');
					}
				}]
			">
		<form id="form" method="post">
			<input id="id" name="id" type="hidden" />
			<table>
				<tr>
					<td>时间段名称:</td>
					<td><input id="name" class="easyui-validatebox" type="text"
						name="name" data-options="required:true"
						style="width:130px;height:14px" />
					</td>
				</tr>
				<tr>
					<td>上班时间:</td>
					<td><input id="startTime" class="easyui-timespinner"
						name="startTime" data-options="required:false,showSeconds:false," />
					</td>
				</tr>
				<tr>
					<td>下班时间:</td>
					<td><input id="endTime" class="easyui-timespinner"
						name="endTime" data-options="required:false,showSeconds:false," />
					</td>
				</tr>
				<tr>
					<td>提前签到分钟:</td>
					<td><input id="beforeStart" name="beforeStart"
						class="easyui-numberspinner"
						data-options="required:false,min:0,max:120" />
					</td>
				</tr>
				<tr>
					<td>延后签到分钟:</td>
					<td><input id="afterStart" name="afterStart"
						class="easyui-numberspinner"
						data-options="required:false,min:0,max:120" />
					</td>
				</tr>
				<tr>
					<td>提前签退分钟:</td>
					<td><input id="beforeEnd" name="beforeEnd"
						class="easyui-numberspinner"
						data-options="required:false,min:0,max:120" />
					</td>
				</tr>
				<tr>
					<td>延后签退分钟:</td>
					<td><input id="afterEnd" name="afterEnd"
						data-options="required:false,min:0,max:120"
						class="easyui-numberspinner" />
					</td>
				</tr>
			</table>
		</form>
	</div>

	<!-- 工具栏 -->
	<div id="tb" style="height:auto">

		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="show()">添加</a><a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="edit()">编辑</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			onclick="del()">删除</a>

	</div>

	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'desc',
			sortName:'name',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/worktime/loadAll/',
			toolbar:'#tb',
			striped: true,
			fitColumns:false,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'name',width:100,align:'left'">名称</th>
					<th data-options="field:'startTime',width:60,align:'left'">上班时间</th>
					<th data-options="field:'endTime',width:60,align:'left'">下班时间</th>
					<th data-options="field:'hour',width:50,align:'right'">工时</th>
					<th data-options="field:'beforeStart',width:80,align:'right'">提前签到分钟</th>
					<th data-options="field:'afterStart',width:80,align:'right'">延后签到分钟</th>
					<th data-options="field:'beforeEnd',width:80,align:'right'">提前签退分钟</th>
					<th data-options="field:'afterEnd',width:80,align:'right'">延后签退分钟</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>